/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-row :gutter="13" type="flex">
        <!-- @blur="searchWorkerServicetype" -->
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入服务名称" />
        </el-col>

        <el-col :span="2">
          <el-select v-model="selectCategoryId" placeholder="请选择" @change="selectStatus">
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-select v-model="selectBrandId" placeholder="请选择" @change="selectStatus">
            <el-option
              v-for="item in lianbaoBrandList"
              :key="item.brandId"
              :label="item.brandName"
              :value="item.brandId"
            />
          </el-select>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="searchWorkerServicetype">查询</el-button>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="addFun()">新增</el-button>
        </el-col>

        <el-col :span="2">
          <el-upload
            v-loading="importLoading"
            :show-file-list="false"
            :http-request="excelUploadShipment"
            action="string"
            class="upload-demo"
            style="display: inline-block"
          >
            <el-button class="filter-item" type="primary" icon="el-icon-upload2">导入</el-button>
          </el-upload>
        </el-col>
        <el-col :span="2">
          <el-button class="filter-item" type="primary" @click="downloadTemplate">下载模板</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="serviceTypeList" border highlight-current-row style="width: 95%;">
      <el-table-column prop="lianbaoBrand.name" label="品牌" min-width="10%" />
      <el-table-column prop="category.name" label="类别" min-width="10%" />

      <el-table-column prop="serviceTypeName" label="服务名称" min-width="20%" />
      <el-table-column prop="serviceTypeOrder" label="排序" min-width="10%" />
      <el-table-column prop="orderServiceType" label="工单服务类型" min-width="10%" />
      <el-table-column
        :formatter="formatterInGuaranteePeriod"
        prop="inGuaranteePeriod"
        label="质保"
        min-width="10%"
      />
      <el-table-column :formatter="formatterRmb" prop="remarks" label="价格" min-width="10%" />
      <el-table-column
        :formatter="formatterUpdateDatetime"
        prop="updateDatetime"
        label="更新日期"
        min-width="10%"
      />

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="editFun(scope)">编辑</el-button>
          <el-button
            class="cancel-btn Danger"
            size="small"
            icon="el-icon-delete"
            @click="cancelEdit(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{closeChildAndRefresh,categoryList,lianbaoBrandList}"
      @close="closeChild"
    />
  </div>
</template>

<script>
import { get, post } from '@/api/utils'
import Add from './dialog/Add.vue'
import { distributorList } from '@/api/payment'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      modal: null,
      modalData: {},
      statusList: [
        { value: '1', label: '正常' },
        { value: '3', label: '停用' }
      ],
      orderServiceTypes: [''],
      selectSortValue: null,
      selectStatusValue: null,
      search: '',
      selectName: '请选择',
      dialogFormVisible: false,
      serviceTypeList: [],
      categoryList: [],
      lianbaoBrandList: [],
      total: 1,
      listLoading: true,
      selectCategoryId: null,
      selectBrandId: null,
      importLoading: false,
      offset: 0,
      limit: 10,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      }
    }
  },
  created() {
    this.getWorkerServicetypeList()
    this.getNetworkCategoryList()
    this.getLianbaoBrandList()
  },

  methods: {
    formatterStatus(row, column) {
      if (row.status) {
        if (row.status === 1) {
          return '正常'
        } else if (row.status === 2) {
          return '停采'
        } else if (row.status === 1) {
          return '停用'
        }
      }
    },
    formatterInGuaranteePeriod(row, column) {
      if (row.inGuaranteePeriod) {
        if (row.inGuaranteePeriod === 'Y') {
          return '保内'
        } else if (row.inGuaranteePeriod === 'N') {
          return '保外'
        }
      }
    },
    formatterRmb(row, column) {
      if (row.inGuaranteePeriod) {
        if (row.inGuaranteePeriod === 'Y') {
          return '￥' + row.inGuaranteePrice
        } else if (row.inGuaranteePeriod === 'N') {
          return '￥' + row.outGuaranteePrice
        }
      }
    },

    formatterUpdateDatetime(row, column) {
      if (row.updateDatetime) {
        return parseTime(new Date(row.updateDatetime))
      }
    },

    getWorkerServicetypeList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize

      var data = {
        offset: this.listQuery.pageNumber,
        count: this.listQuery.pageSize
      }

      if (this.search !== null) {
        data.search = this.search
      }

      if (this.selectCategoryId !== null) {
        data.categoryId = this.selectCategoryId
      }

      if (this.selectBrandId !== null) {
        data.brandId = this.selectBrandId
      }

      get('/wxh-site-rest/rest/', '/webpoint/workerServicetype/list', data)
        .then(response => {
          if (response.data.status === 'success') {
            console.log(
              '-------------------------------------------------------------'
            )
            this.total = response.data.count
            this.serviceTypeList = response.data.data

            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    getNetworkCategoryList() {
      get(
        '/wxh-site-rest/rest/',
        '/webpoint/categoryRest/getNetworkLeafCategory',
        null
      )
        .then(response => {
          if (response.data.status === 'success') {
            this.categoryList = response.data.data
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
        })
    },

    selectSort(event) {
      this.selectSortValue = event
      this.listQuery.page = 1
      this.getWorkerServicetypeList()
    },
    selectStatus(event) {
      this.selectStatusValue = event
      this.listQuery.page = 1

      this.getWorkerServicetypeList()
    },

    searchWorkerServicetype(event) {
      // console.log(event)
      this.listQuery.page = 1
      this.getWorkerServicetypeList()
    },

    // 查询分销商
    getDistributorList() {
      distributorList().then(response => {
        this.disList = response.data.data
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getWorkerServicetypeList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getWorkerServicetypeList()
    },

    searchFrom() {
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.starTime = parseTime(
          this.listQuery.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.listQuery.endTime = parseTime(
          this.listQuery.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.listQuery.starTime = null
        this.listQuery.endTime = null
      }
      this.listQuery.pageNumber = 0
      this.getList()
    },

    getLianbaoBrandList() {
      get('/wxh-site-rest/rest/', '/webpoint/brand/list', null)
        .then(response => {
          if (response.data.status === 'success') {
            this.lianbaoBrandList = response.data.data
            console.log(response.data.count)
            this.total = response.data.count
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '供应商数据加载失败',
            type: 'warning'
          })
        })
    },

    // 导入发货单
    excelUploadShipment(item) {
      // console.log(item.file)
      this.importLoading = true
      var formData = new FormData()
      formData.append('importExcel', item.file)
      post(
        '/wxh-site-rest/rest/',
        '/webpoint/workerServicetype/importServiceTypeList',
        formData
      )
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '导入成功！',
              type: 'success'
            })
            this.importLoading = false
            setTimeout(() => {
              this.searchWorkerServicetype()
            }, 1.5 * 1000)
          } else {
            this.$message(response.data.messge)
            this.importLoading = false
            setTimeout(() => {
              this.getList()
            }, 10 * 1000)
          }
        })
        .catch(error => {
          console.log('===================' + error)
        })
    },

    cancelEdit(row) {
      this.$confirm('您确定删除此服务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var data = { serviceTypeId: row.serviceTypeId }
          var headers = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            Accept: 'application/json'
          }
          post(
            '/wxh-site-rest/rest/',
            '/webpoint/workerServicetype/delete',
            data,
            headers
          )
            .then(response => {
              if (response.data.status === 'success') {
                this.$message({
                  message: '删除服务成功'
                })
                this.searchWorkerServicetype()
              } else if (response.data.status === 'token_check_faild') {
                this.$message({
                  message: response.data.messge,
                  type: 'warning'
                })
              }
            })
            .catch(error => {
              console.log(error)
              this.$message({
                message: '数据加载失败',
                type: 'warning'
              })
            })
        })
        .catch(e => {
          console.log(e)
          this.$message({
            type: 'info',
            message: '已取消当前操作'
          })
        })
    },

    downloadTemplate() {
      window.location.href =
        'https://system.banshouhui.com/STS/master/serviceTypeImport/download'
    },

    closeChild() {
      this.modal = null
    },
    addFun() {
      this.modalData = { type: 'creat', title: '新增服务' }
      this.modal = Add
    },
    editFun(data) {
      var servicetype = data.row
      this.modalData = { type: 'edict', title: '修改服务', servicetype }
      this.modal = Add
    },
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getWorkerServicetypeList()
    }
  }
}
</script>
